<template>
<div class="table-body">
<!--  <el-table :data="roleList">-->
<!--    <el-table-column label="Warming Type" prop="roleId"/>-->
<!--    <el-table-column label="Data" prop="roleName" />-->
<!--    <el-table-column label="Value" prop="roleKey" />-->
<!--    <el-table-column label="Time" prop="time" />-->
<!--    <el-table-column label="Task Result" prop="roleSort" width="200">-->
<!--      <template slot-scope="scope">-->
<!--          <el-progress :percentage="scope.row.progress" :format="format" :color="scope.row.type"></el-progress>-->
<!--      </template>-->
<!--    </el-table-column>-->
<!--    <el-table-column label="operate" prop="roleSort" width="110">-->
<!--      <template slot-scope="scope">-->
<!--        <el-link>Try again</el-link>-->
<!--      </template>-->
<!--    </el-table-column>-->
<!--  </el-table>-->
  <el-table v-loading="loading" :data="roleList">
    <el-table-column label="ID" align="center" prop="id" />
    <el-table-column label="报警时上传的数据" align="center" prop="data" />
    <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
      <template slot-scope="scope">
        <el-button
          size="mini"
          type="text"
          icon="el-icon-delete"
          @click="handleDelete(scope.row)"
          v-hasPermi="['system:alarm:remove']"
        >delete</el-button>
      </template>
    </el-table-column>
  </el-table>
  <pagination
    v-show="total>0"
    :total="total"
    :page.sync="queryParams.pageNum"
    :limit.sync="queryParams.pageSize"
    @pagination="getList"
  />
</div>
</template>

<script>
import { listAlarm,   delAlarm  } from "@/api/system/alarm";

export default {
  name: "tabWarning",
  data(){
    return{
      loading: true,
      total: 0,
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        deviceId: null,
        data: null,
      },
      roleList: []
    }
  },
  created() {
    this.getList()
  },
  methods:{
    format(percentage) {
      return percentage === 100 ? 'success' : `${percentage}%`;
    },
    getList(){
      this.loading = true;
      listAlarm(this.queryParams).then(response => {
        this.roleList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    /** delete按钮操作 */
    handleDelete(row) {
      const ids = row.id || this.ids;
      this.$modal.confirm('是否确认delete警报编号为"' + ids + '"的数据项？').then(function() {
        return delAlarm(ids);
      }).then(() => {
        this.getList();
        this.$modal.msgSuccess("delete成功");
      }).catch(() => {});
    },
  }
}
</script>

<style scoped>
.table-body{
  background: #fff;
  padding: 10px;
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .1);
  border: 1px solid #e6ebf5;
  border-radius: 5px;
}
</style>
